<template>
  <div class="product">
    <!-- 搜索框 -->
    <div class="search">
        <!-- filterable是否可搜索
            remote是否可远程搜索
            reserve-keyword多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
         -->
            <template>
				<el-select v-model="searchValue"
					filterable
					clearable
					remote
					@change="searchTextChange"
					reserve-keyword
					@clear="clear"
          @blur="searchBlur"
					placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
					:remote-method="remoteMethod"
					>
					<el-option v-for="item in searchList"
						:key="item.sId"
						:label="item.name"
						:value="item.name">
					</el-option>
				</el-select>
			</template>
			<!-- 搜索按钮 -->
			<el-button type="primary"
				icon="el-icon-search"
                @click="onSearchButtonClick"
				plain></el-button>
			<!-- 添加按钮 -->
			<el-button type="primary"
				@click="addStu"
                v-has="'add'"
                :disabled="disabled"
				>添加项目</el-button>
    </div>
    <!-- 班级选择 -->
   <div class="select-class">
			<!-- 框框 -->
			<el-form>
				<el-form-item label="选择班级:">
					<el-select v-model="classes"             
						filterable
						@visible-change="classVisible"
						@change="classChange"
						placeholder="请选择">
						<el-option 
              v-loading="selectLoading"
							label="全部"
							value="all"
            ></el-option> 

						<el-option v-for="(item,index) in classList" :key="index"
                            :label="item" :value="item"
                        ></el-option>
					</el-select>
				</el-form-item>
			</el-form> 
		</div>
        <!-- 导出excel -->
		<div class="exportExcel">
			<el-button icon="iconfont icon-excel"
				@click="exportExcel">导出excel数据</el-button>
		</div>
    <!-- 表格 -->
    <div class="stu-table">
      <el-table
        :data="stuData"
        v-loading="loading"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="headimgurl"
          label="头像"
          align="center"
          width="100"
        >
        <template v-slot="scope">
						<el-avatar shape="square"
							:size="50"
							fit="fill"
							:src="scope.row.headimgurl">
            </el-avatar>
		</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="class"
          label="班级"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="productUrl"
          label="项目"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cTime"
          label="时间"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
        <template v-slot="{row}">
              <el-button
               class="btn"
               icon="el-icon-view"
               plain
               v-has="'read'"
               @click="look(row)"
              >查看
              </el-button>
          <el-button
            class="btn"
            icon="el-icon-edit"
            @click="editStu(row)"
            v-has="'edit'"
            :disabled="disabled"
            plain
           >编辑
          </el-button>
          <el-button
            class="btn"
            icon="el-icon-delete"
            @click="deleteStu(row)"
            plain
            v-has="'delete'"
            >删除
          </el-button>
        </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- dialog弹出框 -->
    <gui-dialog></gui-dialog>
    
    <!-- 分页器 -->
    <!-- hide-on-single-page只有一页分页器会隐藏 -->
    <!-- page-size页面一次显示几条数据 -->
    <!-- current 当前分页器的页数 -->
    <div class="pagination">
			<el-pagination background
				hide-on-single-page
				layout="prev, pager, next"
				:current-page.sync="currentPage"
				@current-change="changePage"
				:page-size="stuPageSize"
				:total="stuTotal">
			</el-pagination>
	</div>
  </div>
</template>
<script>

import dialog from "../../../../components/Dialog";
import { mapState, mapActions,mapMutations} from "vuex";
import * as stuApi from "../../../../api/studentManage"
// 引入导出表格的插件
import qee from "qf-export-excel"
export default {
  computed: {
    ...mapState(["stuData",'loading','stuTotal','stuPageSize']),
  },
  components: {
    "gui-dialog": dialog,
  },
  data() {
    return {
      //    stuData:[],//学员列表数据  在vuex中存储了
      classes:'',//绑定的班级 用于绑定v-model 选中的时候会触发change事件
      classList:[],//班级列表
      selectLoading:true,//班级搜索加载动画
      searchList:[],//学员名字列表
      searchValue:'',//搜索框的双向数据绑定
      currentPage:1,//分页器默认第一页
      disable:true,//按钮鉴权
    };
  },
  created() {
    this.GET_STULIST(); //获取学员数据列表
  },
  methods: {
    ...mapActions(["GET_STULIST"]),
    ...mapMutations(["SHOW_DIALOG","CHANGE_DIALOG_TITLE","SET_CURRENT_ROW","SET_STU_DATA","SET_STUDATA"]),
    //  获取表格数据  不用了在vuex中封装了获取学员信息的方法
    // getStuList(params={count:10,page:1,calsses:""}){
    //     // 发送请求获取学员数据
    //     stuApi.getStuListApi().then(res=>{
    //         // console.log(res.data);
    //         this.stuData=res.data.data;
    //         this.loading=false;//关闭表格加载动画
    //     })
    // }
    //增加学员
    addStu(){
        // 修改dialog标题
        this.CHANGE_DIALOG_TITLE("添加学员信息")
        //弹出dialog
        this.SHOW_DIALOG()
        
    },
    //编辑学员
    editStu(row){   
        this.CHANGE_DIALOG_TITLE("编辑学员信息");//编辑dialog标题
        this.SHOW_DIALOG();//打开dialog
        //  console.log(row);
        // 将当前这一行数据回显到dialog弹出框中
        this.SET_CURRENT_ROW(row)
    },

    // 删除学员
    deleteStu(row){
        // console.log(row);
             this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
                        stuApi.delStuApi(row.sId).then(res=>{
                            // console.log(res);
                             if(res.data.state){//删除成功
                                   this.GET_STULIST();//更新列表
                                   this.$message({
									type: "success",
									message: "删除成功!",
								    });
                             }else{
                                //  删除失败这条数据已经被别人删除了
                                this.$message.error('删除失败，数据不存在')
                             }
                        })
						 
					})
					.catch(() => {
						this.$message({
							type: "warning",
							message: "已取消删除",
						});
					});
    },
     // 查看学员数据
        look(row){
            // console.log(row); 
            this.SET_STUDATA(row)
            this.$router.push({name:"profill"})
           
        },
    // 班级选择框展开/收起触发的事件
    classVisible(isVisible){
        // 展开打开加载动画
        this.selectLoading=true;
        // console.log(isVisible);
        if(isVisible){
            // 下拉框出现发送请求获取班级列表
            stuApi.getClassApi().then(res=>{
                // console.log(res);
                this.classList=res.data.data;
                // 关闭加载动画
                this.selectLoading=false; 
            })
        }
    },
       
    // 选择班级
    classChange(query){
        // 1.select展开的时候，需要展示所有的班级列表
        // 2.选中班级列表的时候，要更新表格
        // 调用封装好的获取学员列表方法 传递班级
        // query就是选中的班级option
        // 当query等于all的时候表示要展示所有的班级
        if(query==="all"){
            query="";//因为不传的话后台会默认返回所有班级
        }
        this.GET_STULIST({classes:query});
    },
    // 分页器页码发生改变的时候触发的事件
    changePage(page){
        // console.log(page);
        // 判断搜索框是否有值 如果有 就展示搜索结果的分页
        if(this.searchValue){
            stuApi.searchStuApi(page,this.searchValue,null)
            .then(res=>{
                this.SET_STU_DATA(res.data)
            })
        }else{
              // 页码变更 传给后台 重新获取数据
              this.GET_STULIST({page});
        }
    },
      remoteMethod(query){
        // 键盘弹起的时候获取输入值 这里是模糊搜索
        // console.log(query);
        this.searchValue=query;//将输入值给搜索框双向绑定
          stuApi.searchStuApi(null,query,null).then(res=>{
            // console.log(res);
            // 数组去重
            let norepeat=[];
            for(let i=0;i<res.data.data.length;i++){
                let flag=true;
                for(let k=0;k<norepeat.length;k++){
                    if(norepeat[k].name===res.data.data[i].name){
                        flag=false;
                        break;
                    }
                }
                if(flag){
                    norepeat.push(res.data.data[i]);
                }
            }
            this.searchList=norepeat;
        })
    },
   
    // 搜索框选中值发生变化的事件
    searchTextChange(searchText){
        // 更新列表 发送请求 精确搜索的时候 触发的是vuex中的方法更新学员列表
        stuApi.searchStuApi(null,searchText,null).then(res=>{
            // console.log(res);
            this.currentPage=1;//让分页器数值初始化
            this.SET_STU_DATA(res.data);
        })
    },
   
    // 点击搜索按钮
    onSearchButtonClick(){
          stuApi.searchStuApi(null,this.searchValue,null).then(res=>{
            // console.log(res);
            this.SET_STU_DATA(res.data)
        })
    },
    // 搜索框失去焦点清空输入框的内容 可以不清 看自己意愿
    searchBlur(){
        this.searchValue="";
    },
    // 点击搜索框叉叉的时候触发的方法
    clear(){
        // 让分页器初始化
        this.currentPage=1;
    },
    // 点击导出excel
   exportExcel() {
				let titleList = [
					{
						title: "头像地址",
						key: "headimgurl"
					},
					{
						title: "姓名",
						key: "name"
					},
					{
						title: "学历",
						key: "degree"
					},
					{
						title: "班级",
						key: "class"
					},
					{
						title: "项目地址",
						key: "productUrl"
					},
					{
						title: "创建时间",
						key: "cTime"
					},
				]

				qee(titleList, this.stuData, "2107班级信息")
			},

  },
};
</script>